<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>V2解析 - LayUI模块化应用</title>
    <link rel="stylesheet" href="https://registry.npmmirror.com/layui/2.11.6/files/dist/css/layui.css">
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
    <div class="layui-layout layui-layout-admin">
        <!-- 头部组件 -->
        <div id="header-container"></div>
        
        <!-- 侧边栏组件 -->
        <div id="sidebar-container"></div>
        
        <!-- 内容主体区域 -->
        <div class="layui-body">
            <div class="layui-fluid content-wrapper">
                <div class="content-header">
                    <h2>V2解析</h2>
                </div>
                
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">解析配置</div>
                            <div class="layui-card-body">
                                <form class="layui-form" lay-filter="v2Form">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">解析类型</label>
                                            <div class="layui-input-inline" style="width: 150px;">
                                                <select name="resolveType" lay-filter="resolveType">
                                                    <option value="domain">域名解析</option>
                                                    <option value="ip">IP解析</option>
                                                    <option value="url">URL解析</option>
                                                    <option value="custom">自定义</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">目标地址</label>
                                            <div class="layui-input-inline" style="width: 300px;">
                                                <input type="text" name="target" placeholder="请输入要解析的地址" class="layui-input" lay-verify="required">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">解析服务器</label>
                                            <div class="layui-input-inline" style="width: 150px;">
                                                <select name="server" lay-filter="server">
                                                    <option value="auto">自动选择</option>
                                                    <option value="google">Google DNS</option>
                                                    <option value="cloudflare">Cloudflare DNS</option>
                                                    <option value="alibaba">阿里云DNS</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <button class="layui-btn" lay-submit lay-filter="startResolve">开始解析</button>
                                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">高级选项</label>
                                            <div class="layui-input-inline" style="width: 120px;">
                                                <input type="checkbox" name="enableCache" title="启用缓存" lay-skin="primary" checked>
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <div class="layui-input-inline" style="width: 120px;">
                                                <input type="checkbox" name="enableLog" title="记录日志" lay-skin="primary" checked>
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <div class="layui-input-inline" style="width: 150px;">
                                                <input type="checkbox" name="enableRetry" title="失败重试" lay-skin="primary">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">解析结果</div>
                            <div class="layui-card-body">
                                <div id="resolveResult" class="result-container">
                                    <div class="empty-data">
                                        <i class="layui-icon layui-icon-loading"></i>
                                        <p>等待解析...</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">解析统计</div>
                            <div class="layui-card-body">
                                <div id="resolveStats" style="height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">解析历史</div>
                            <div class="layui-card-body">
                                <table id="resolveHistory" lay-filter="resolveHistory"></table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">响应时间分析</div>
                            <div class="layui-card-body">
                                <div id="responseTimeChart" style="height: 250px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">成功率趋势</div>
                            <div class="layui-card-body">
                                <div id="successRateChart" style="height: 250px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部组件 -->
        <div id="footer-container"></div>
    </div>

    <script src="https://registry.npmmirror.com/layui/2.11.6/files/dist/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>
    <script src="js/common.js"></script>
    <script>
        // 页面特定的JS代码
        layui.use(['form', 'table', 'layer', 'element'], function() {
            var form = layui.form;
            var table = layui.table;
            var layer = layui.layer;
            var element = layui.element;
            
            // 页面加载完成后执行
            $(document).ready(function() {
                // 加载组件
                loadComponents();
                
                // 初始化图表
                initCharts();
                
                // 初始化历史记录表格
                initHistoryTable();
                
                // 加载历史数据
                loadHistoryData();
            });
            
            // 加载组件函数
            function loadComponents() {
                // 加载头部
                $('#header-container').load('components/header.html', function() {
                    layui.element.render();
                });
                
                // 加载侧边栏
                $('#sidebar-container').load('components/sidebar.html', function() {
                    layui.element.render();
                    // 设置当前页面激活状态
                    $('#nav-v2-resolve').addClass('layui-this');
                });
                
                // 加载底部
                $('#footer-container').load('components/footer.html');
            }
            
            // 初始化图表
            function initCharts() {
                initResolveStats();
                initResponseTimeChart();
                initSuccessRateChart();
            }
            
            // 初始化解析统计图表
            function initResolveStats() {
                var resolveStats = echarts.init(document.getElementById('resolveStats'));
                
                // 解析类型分布图表 - 需要连接真实数据接口
                var option = {
                    title: {
                        text: '解析类型分布 - 需要连接真实数据接口',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '解析类型',
                            type: 'pie',
                            radius: '60%',
                            data: [],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                
                resolveStats.setOption(option);
                
                // 响应式处理
                window.addEventListener('resize', function() {
                    resolveStats.resize();
                });
            }
            
            // 初始化响应时间图表
            function initResponseTimeChart() {
                var responseTimeChart = echarts.init(document.getElementById('responseTimeChart'));
                
                // 响应时间趋势图表 - 需要连接真实数据接口
                var option = {
                    title: {
                        text: '响应时间趋势 - 需要连接真实数据接口',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: []
                    },
                    yAxis: {
                        type: 'value',
                        name: '响应时间(ms)'
                    },
                    series: [
                        {
                            name: '响应时间',
                            type: 'line',
                            data: [],
                            smooth: true,
                            itemStyle: {
                                color: '#5470c6'
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {offset: 0, color: 'rgba(84, 112, 198, 0.3)'},
                                    {offset: 1, color: 'rgba(84, 112, 198, 0.1)'}
                                ])
                            }
                        }
                    ]
                };
                
                responseTimeChart.setOption(option);
                
                // 响应式处理
                window.addEventListener('resize', function() {
                    responseTimeChart.resize();
                });
            }
            
            // 初始化成功率趋势图表
            function initSuccessRateChart() {
                var successRateChart = echarts.init(document.getElementById('successRateChart'));
                
                // 成功率趋势图表 - 需要连接真实数据接口
                var option = {
                    title: {
                        text: '成功率趋势 - 需要连接真实数据接口',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}<br/>{a}: {c}%'
                    },
                    xAxis: {
                        type: 'category',
                        data: []
                    },
                    yAxis: {
                        type: 'value',
                        name: '成功率(%)',
                        min: 80,
                        max: 100
                    },
                    series: [
                        {
                            name: '成功率',
                            type: 'line',
                            data: [],
                            smooth: true,
                            itemStyle: {
                                color: '#5FB878'
                            },
                            lineStyle: {
                                width: 3
                            }
                        }
                    ]
                };
                
                successRateChart.setOption(option);
                
                // 响应式处理
                window.addEventListener('resize', function() {
                    successRateChart.resize();
                });
            }
            
            // 初始化历史记录表格
            function initHistoryTable() {
                table.render({
                    elem: '#resolveHistory',
                    cols: [[
                        {field: 'id', title: 'ID', width: 60, sort: true, fixed: 'left'},
                        {field: 'target', title: '目标地址', width: 200, sort: true},
                        {field: 'type', title: '解析类型', width: 100, sort: true},
                        {field: 'server', title: '解析服务器', width: 120, sort: true},
                        {field: 'result', title: '解析结果', width: 200, sort: true},
                        {field: 'responseTime', title: '响应时间(ms)', width: 120, sort: true},
                        {field: 'status', title: '状态', width: 80, sort: true, templet: function(d) {
                            return d.status === 'success' ? 
                                '<span style="color: #5FB878;">成功</span>' : 
                                '<span style="color: #FF5722;">失败</span>';
                        }},
                        {field: 'resolveTime', title: '解析时间', width: 150, sort: true},
                        {title: '操作', width: 120, fixed: 'right', toolbar: '#historyBar'}
                    ]],
                    page: true,
                    limit: 10,
                    limits: [10, 20, 30],
                    height: 'full-400',
                    done: function(res, curr, count) {
                        console.log('历史记录表格渲染完成', res, curr, count);
                    }
                });
                
                // 监听工具条事件
                table.on('tool(resolveHistory)', function(obj) {
                    var data = obj.data;
                    var layEvent = obj.event;
                    
                    if (layEvent === 'retry') {
                        // 重新解析
                        startResolve(data.target, data.type, data.server);
                    } else if (layEvent === 'copy') {
                        // 复制结果
                        copyToClipboard(data.result);
                    }
                });
            }
            
            // 加载历史数据
            function loadHistoryData() {
                // 生成模拟历史数据
                var historyData = [];
                var targets = ['example.com', 'google.com', 'github.com', 'stackoverflow.com', 'baidu.com'];
                var types = ['域名解析', 'IP解析', 'URL解析'];
                var servers = ['Google DNS', 'Cloudflare DNS', '阿里云DNS'];
                
                for (var i = 0; i < 30; i++) {
                    var status = Math.random() > 0.1 ? 'success' : 'failed';
                    var result = status === 'success' ? 
                        (Math.random() > 0.5 ? '192.168.1.' + Math.floor(Math.random() * 255) : '解析成功') : 
                        '解析失败';
                    
                    historyData.push({
                        id: i + 1,
                        target: targets[Math.floor(Math.random() * targets.length)],
                        type: types[Math.floor(Math.random() * types.length)],
                        server: servers[Math.floor(Math.random() * servers.length)],
                        result: result,
                        responseTime: Math.floor(Math.random() * 200) + 50,
                        status: status,
                        resolveTime: layui.util.toDateString(new Date(Date.now() - Math.random() * 86400000 * 7), 'yyyy-MM-dd HH:mm:ss')
                    });
                }
                
                // 重新加载表格数据
                table.reload('resolveHistory', {
                    data: historyData
                });
            }
            
            // 开始解析函数
            function startResolve(target, type, server) {
                if (!target) {
                    layer.msg('请输入目标地址');
                    return;
                }
                
                // 显示加载状态
                showLoading();
                
                // 模拟解析过程
                setTimeout(function() {
                    var result = simulateResolve(target, type, server);
                    showResult(result);
                    
                    // 添加到历史记录
                    addToHistory(result);
                    
                    layer.msg('解析完成');
                }, 2000);
            }
            
            // 模拟解析
            function simulateResolve(target, type, server) {
                var responseTime = Math.floor(Math.random() * 200) + 50;
                var status = Math.random() > 0.1 ? 'success' : 'failed';
                
                var result = {
                    target: target,
                    type: type || '域名解析',
                    server: server || '自动选择',
                    responseTime: responseTime,
                    status: status,
                    resolveTime: layui.util.toDateString(new Date(), 'yyyy-MM-dd HH:mm:ss')
                };
                
                if (status === 'success') {
                    if (type === '域名解析' || !type) {
                        result.result = '192.168.1.' + Math.floor(Math.random() * 255);
                        result.details = {
                            'A记录': result.result,
                            'TTL': '300',
                            '解析时间': responseTime + 'ms',
                            'DNS服务器': server || '自动选择'
                        };
                    } else if (type === 'IP解析') {
                        result.result = '解析成功';
                        result.details = {
                            'IP地址': target,
                            '地理位置': '中国-北京',
                            '运营商': '中国电信',
                            '解析时间': responseTime + 'ms'
                        };
                    } else if (type === 'URL解析') {
                        result.result = 'https://' + target;
                        result.details = {
                            '原始URL': target,
                            '解析后URL': result.result,
                            '状态码': '200',
                            '解析时间': responseTime + 'ms'
                        };
                    }
                } else {
                    result.result = '解析失败';
                    result.details = {
                        '错误信息': '无法解析目标地址',
                        '错误代码': 'DNS_ERROR',
                        '建议': '请检查目标地址是否正确'
                    };
                }
                
                return result;
            }
            
            // 显示加载状态
            function showLoading() {
                $('#resolveResult').html(
                    '<div class="loading-state">' +
                    '<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>' +
                    '<p>正在解析中...</p>' +
                    '</div>'
                );
            }
            
            // 显示结果
            function showResult(result) {
                var html = '<div class="result-content">';
                
                if (result.status === 'success') {
                    html += '<div class="result-success">';
                    html += '<i class="layui-icon layui-icon-ok-circle" style="color: #5FB878; font-size: 24px;"></i>';
                    html += '<h3>解析成功</h3>';
                    html += '<p><strong>目标地址：</strong>' + result.target + '</p>';
                    html += '<p><strong>解析结果：</strong>' + result.result + '</p>';
                    html += '<p><strong>响应时间：</strong>' + result.responseTime + 'ms</p>';
                    html += '<p><strong>解析时间：</strong>' + result.resolveTime + '</p>';
                    
                    if (result.details) {
                        html += '<div class="result-details">';
                        html += '<h4>详细信息</h4>';
                        html += '<table class="layui-table">';
                        for (var key in result.details) {
                            html += '<tr><td>' + key + '</td><td>' + result.details[key] + '</td></tr>';
                        }
                        html += '</table>';
                        html += '</div>';
                    }
                    
                    html += '</div>';
                } else {
                    html += '<div class="result-error">';
                    html += '<i class="layui-icon layui-icon-close-circle" style="color: #FF5722; font-size: 24px;"></i>';
                    html += '<h3>解析失败</h3>';
                    html += '<p><strong>目标地址：</strong>' + result.target + '</p>';
                    html += '<p><strong>错误信息：</strong>' + result.result + '</p>';
                    html += '<p><strong>响应时间：</strong>' + result.responseTime + 'ms</p>';
                    html += '<p><strong>解析时间：</strong>' + result.resolveTime + '</p>';
                    
                    if (result.details) {
                        html += '<div class="result-details">';
                        html += '<h4>错误详情</h4>';
                        html += '<table class="layui-table">';
                        for (var key in result.details) {
                            html += '<tr><td>' + key + '</td><td>' + result.details[key] + '</td></tr>';
                        }
                        html += '</table>';
                        html += '</div>';
                    }
                    
                    html += '</div>';
                }
                
                html += '</div>';
                
                $('#resolveResult').html(html);
            }
            
            // 添加到历史记录
            function addToHistory(result) {
                // 获取当前历史记录
                var tableData = table.cache.resolveHistory || [];
                
                // 添加新记录
                var newRecord = {
                    id: tableData.length + 1,
                    target: result.target,
                    type: result.type,
                    server: result.server,
                    result: result.result,
                    responseTime: result.responseTime,
                    status: result.status,
                    resolveTime: result.resolveTime
                };
                
                // 添加到数组开头
                tableData.unshift(newRecord);
                
                // 限制记录数量
                if (tableData.length > 30) {
                    tableData = tableData.slice(0, 30);
                }
                
                // 重新加载表格
                table.reload('resolveHistory', {
                    data: tableData
                });
            }
            
            // 复制到剪贴板
            function copyToClipboard(text) {
                var textarea = document.createElement('textarea');
                textarea.value = text;
                document.body.appendChild(textarea);
                textarea.select();
                document.execCommand('copy');
                document.body.removeChild(textarea);
                layer.msg('已复制到剪贴板');
            }
            
            // 监听表单提交
            form.on('submit(startResolve)', function(data) {
                var formData = data.field;
                console.log('解析参数：', formData);
                
                startResolve(formData.target, formData.resolveType, formData.server);
                
                return false;
            });
            
            // 监听解析类型变化
            form.on('select(resolveType)', function(data) {
                var type = data.value;
                var placeholder = '';
                
                switch (type) {
                    case 'domain':
                        placeholder = '请输入域名，如：example.com';
                        break;
                    case 'ip':
                        placeholder = '请输入IP地址，如：192.168.1.1';
                        break;
                    case 'url':
                        placeholder = '请输入URL，如：https://example.com';
                        break;
                    case 'custom':
                        placeholder = '请输入自定义格式';
                        break;
                }
                
                $('input[name="target"]').attr('placeholder', placeholder);
            });
        });
        
        // 工具条模板
        layui.define(function(exports) {
            var tpl = '<script type="text/html" id="historyBar">' +
                     '<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="retry">重试</a>' +
                     '<a class="layui-btn layui-btn-xs" lay-event="copy">复制</a>' +
                     '</' + 'script>';
            document.write(tpl);
            exports('historyBar', {});
        });
    </script>
</body>
</html>